<!--
 * @Author: your name
 * @Date: 2021-07-18 19:27:57
 * @LastEditTime: 2022-02-22 19:55:56
 * @LastEditors: ke.xue
 * @Description: In User Settings Edit
 * @FilePath: \product-display\src\page\show\list.vue
-->
<template>
  <div class="listPage">
    <div class="sidebarBox">
      <div class="produIconBox"><img :src="detailIcon" alt=""></div>
      <el-tabs tab-position="left" v-model="tabsActive" @tab-click="tabsClick">
        <el-tab-pane v-for="(item, index) in typeTree" :label="item.label" :name="item.tabId" :key="index">
          <RecursionTab v-if="item.children && item.tabId == tabsActive" :list="item.children" :active="item.children[0].tabId" @activeChange="activeChange"></RecursionTab>
          <div class="commodityList">
            <div class="itemBox linkBox" v-for="detail in tableData" :key="detail.id" @click="detailClick(detail)">
              <div class="commodityImgBox"><img :src="imgBaseUrl + detail.imageUrl" alt=""></div>
              <p class="commodityName">{{ detail.imageName }}</p>
            </div>
            <div v-if="tableData.length < 1">暂无此分类商品</div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="paginationBox">
        <div class="empty"></div>
        <el-pagination
          @size-change="handleSizeChange"
          :current-page="pageObj.pageIndex"
          :page-size="pageObj.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="totalCount">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getProductList } from '@/api/api.js'
import RecursionTab from '@/components/recursionTab.vue'
import { mapGetters } from 'vuex'
import { detailIcon } from '@/assets/js/img.js'

export default {
  name: 'ShowList',
  data () {
    return {
      detailIcon,
      tabsActive: '',
      pageObj: {
        pageIndex: 1,
        pageSize: 12
      },
      activeList: [],
      parentId: 20,
      totalCount: 0,
      tableData: [],
      imgBaseUrl: process.env.VUE_APP_IMAGE_URL
    }
  },
  computed: {
    ...mapGetters([
      'typeTree'
    ])
  },
  watch: {
    parentId () {
      this.getDataList()
    },
    typeTree () {
      this.init(this.$route.query)
    }
  },
  components: {
    RecursionTab
  },
  mounted () {
    this.init(this.$route.query)
  },
  activated () {
    if (this.$route.query.update) {
      this.init(this.$route.query)
    }
  },
  methods: {
    activeChange (val) {
      // console.log(val, 'activeChange')
      val && (this.parentId = val)
    },
    init (query) {
      const { index } = query
      this.tabsClick({ index: index || 0 })
    },
    // 分页器翻页
    handleSizeChange (val) {
      this.pageObj.pageSize = val
      this.pageObj.pageIndex = 1
      this.getDataList()
    },
    // 获取列表数据
    getDataList () {
      const params = {
        parentId: this.parentId,
        ...this.pageObj
      }
      getProductList(params).then(res => {
        const { totalCount, pageData } = res
        this.tableData = pageData
        this.totalCount = totalCount
      })
    },
    tabsClick (val) {
      // console.log(val, 'tabsClick_val')
      const { name, index } = val
      if (this.typeTree[index]) {
        const { children, tabId } = this.typeTree[index]
        if (name) {
          !children && (this.parentId = val.name)
          this.tabsActive = val.name
        } else {
          !children && (this.parentId = tabId)
          this.tabsActive = tabId
        }
        children && (this.activeList = [children])
      }
    },
    detailClick (obj) {
      this.$router.push({
        path: '/show/detail',
        query: obj
      })
    }
  },
  beforeRouteUpdate (to, from, next) {
    this.init(to.query)
    next()
  }
}
</script>

<style lang="less" scoped>
.listPage {
  display: flex;
  .sidebarBox {
    width: 1000px;
    .produIconBox {
      width: 200px;
    }
  }
  .itemBox {
    margin: 15px 38px;
  }
  .paginationBox {
    display: flex;
    .empty {
      flex: 1;
    }
  }
}
</style>
